import React from 'react'
import { Grid, List } from 'antd-mobile'
import PropTypes from 'prop-types'

class AvatarSelector extends React.Component {
    static propTypes = {
        selectAvatar: PropTypes.func.isRequired
    }
    constructor(props) {
        super(props)
        this.state = {}
    }
    render(h) {
        const avatarList = ['boy', 'girl', 'man', 'woman', 'bull', 'chick', 
                            'crab', 'hedgehog', 'hippopotamus', 'koala', 
                            'lemur', 'pig', 'tiger', 'whale', 'zebra']
                            .map(v => ({
                                icon: require(`../img/${v}.png`),
                                text: v
                            }))
        const gridHeader = this.state.icon?(<div>
                                <span>已选择头像</span>
                                <img style={{width:20}} src={this.state.icon} alt=''/>
                            </div>)
                            :'请选择头像'
        return (
            <div>
                {/* {gridHeader} */}
                <List renderHeader={()=>gridHeader}>
                    <Grid onClick={e=>{
                        this.setState(e)
                        this.props.selectAvatar(e.text)
                    }}
                    data={avatarList} columnNum={5}></Grid>
                </List>
            </div>
        )
    }
}

export default AvatarSelector